<template>
  <div class="more-container">
 
    <div class="innerclass">
      <el-form
        ref="classtopform"
        :model="classtopforms"
        :rules="rules"
        size="small"
        label-width="79px"
      >
        <el-row>
          <el-col :span="5">
            <el-row>
              <el-form-item label-width="0" prop="searchword">
                <el-input
                  v-model="classtopforms.searchword"
                  placeholder="请输入班型名称"
                  clearable
                  :style="{ width: '95%' }"
                ></el-input>
              </el-form-item>
            </el-row>
          </el-col>
      <!--    <el-col :span="5">
            <el-row>
              <el-form-item label-width="0" prop="team_id">
                <treeselect v-model="classtopforms.team_id" :options="treeOptions" :default-expand-level="1" :normalizer="normalizer"
                  placeholder="请选择关联机构" />

              </el-form-item>
            </el-row>
          </el-col> -->
          <el-col :span="5">
            <el-row>
              <el-form-item label-width="0" prop="gettype">
                <el-select
                  v-model="classtopforms.gettype"
                  placeholder="请选择申领类型"
                  clearable
                  :style="{ width: '95%' }"
                >
                  <el-option
                    v-for="(item, index) in gettypeOptions"
                    :key="index"
                    :label="item.title"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="5">
            <el-row>
              <el-form-item label-width="0" prop="paytype">
                <el-select
                  v-model="classtopforms.paytype"
                  placeholder="请选择付款方式"
                  clearable
                  :style="{ width: '95%' }"
                >
                  <el-option
                    v-for="(item, index) in paytypeOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <!-- 搜索查询 -->
      <commonline
        style="margin-top:10px;"
        :newText="'班型'"
        :isshowAdd="checkPermission(['packageAdd'])"
        @addList="additem"
        @searchlist="searchlist"
        @resetform="resetform"
        :importname='"班型"'
      ></commonline>
      <!-- 弹窗 -->
      <classdialog  @confirm='confirm' :isshowDialog='isshowclassDialog' :formType='formtype' :dialogTitle='dialogTitle'  @closedialog='closedialog'></classdialog>
    </div>
    <classTable @refreshdata='refreshdata' @switchBack='switchBack'  @deleteitem='deleteitems' @openedit='openedit' @changepageTotal='changepageTotal' @changepage='changepage' :tabData='tabList'></classTable>
  </div>
</template>

<script>

import classdialog from './component/classdialog'
import classTable from './component/classTable'
import commonline from '@/components/commonline/commonline'
//api
import {getcourseList,deleteItem} from '@/api/course'
import {getSessionStorage} from '@/utils/accessToken'
//按钮权限验证
import checkPermission from '@/utils/permission'
import Treeselect from "@riophae/vue-treeselect"; //下拉树组件
export default {
  data() {
    return {
       dialogTitle:'新增班型',
       //页码
      page:1,
      //翻页总数
      pageTotal:10,
      //新增还是编辑
      formtype:0,
      //表格数据
      tabList:{},
      //是否显示导入按钮
      isshowimportbtn: true,
      //是否显示弹窗
      isshowclassDialog:false,
      classtopforms: {
        searchword: undefined,
        team_id: null,
        gettype: undefined,
        paytype: undefined,
      },
      rules: {
        classname: [],
        team_id: [],
        gettype: [],
        paytype: [],
      },
      schoolnameOptions: [],
      gettypeOptions: [],
        treeOptions: [],
      //付款方式
      paytypeOptions: [
        {
          label: '全款',
          value: 1,
        },
        {
          label: '分期',
          value: 2,
        },
      ],
    }
  },
  components: {
    classdialog,
    classTable,
    commonline,
    Treeselect
  },
  methods: {
     //按钮权限验证
    checkPermission,
    normalizer(node) {
      return {
        id: node.id,
        label: node.title,
        children: node.children,
      }
    },
    //刷新列表
    refreshdata(){
      this.getCourseList(this.page,this.pageTotal)
    },
    //列表切换switch 触发的事件
    switchBack(){
      this.getCourseList(this.page,this.pageTotal)
    },
    //删除
    async deleteitems(id){
      let params = {
        id:id
      }
      //询问客户是否删除
       this.$confirm('您确认要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let data = await deleteItem(params)
          if(data.code=='0000'){
            this.$message({
            type: 'success',
            message: '删除成功!'
          });
          }
          //刷新列表
        this.getCourseList(this.page,this.pageTotal)

        }).catch(() => {

        });
    },
     //添加和编辑成功
    confirm(){
      this.formtype = 0
      this.isshowclassDialog = false
      //刷新列表
      this.getCourseList(this.page,this.pageTotal)
    },
     //总数翻页
    changepageTotal(val){
      this.pageTotal = val
      this.getCourseList(this.page,this.pageTotal)
    },
    //翻页
    changepage(val){
      this.page = val
      this.getCourseList(this.page,this.pageTotal)
    },
    //获取列表数据
    async getCourseList(page=1,rows=10){
      let params = {
        page,
        rows
      }
      //关键字
      if(this.classtopforms.searchword){
        params.keyword = this.classtopforms.searchword
      }
      //选择校区
      if(this.classtopforms.team_id){
        params.team_id =this.classtopforms.team_id
      }
      //申领类型
      if(this.classtopforms.gettype){
        params.apply_type = this.classtopforms.gettype
      }
      //付款方式
      if(this.classtopforms.paytype){
        params.pay_type = this.classtopforms.paytype
      }

      let data = await getcourseList(params)
      this.tabList = data.data
    },
    additem() {
      this.dialogTitle = '新增班型'
      this.isshowclassDialog = true
      this.formtype = 0
    },
    //搜索查询
    searchlist() {
      this.$message({
            type: 'success',
            message: '查询成功!'
          });
      this.getCourseList(this.page,this.pageTotal)
    },
    resetform() {
      this.$refs['classtopform'].resetFields()
       this.$message({
            type: 'success',
            message: '已重置!'
          });
      this.page = 1
      this.pageTotal = 10
      //请求列表
      this.getCourseList(this.page,this.pageTotal)
    },
    closedialog(){
      this.isshowclassDialog = false
      this.formtype = 0
    },
    openedit(val){
      this.dialogTitle = '编辑班型'
      this.isshowclassDialog = true
      this.formtype = val.type
     this.$nextTick(()=>{
        this.$bus.emit('editformclasstype', val)
     })
      
    }
  },
  mounted(){
    //获取列表数据
    this.getCourseList(this.page,this.pageTotal)
    //校区选项
    this.gettypeOptions = getSessionStorage('Options')[1]
    //校区名字
    this.schoolnameOptions = getSessionStorage('Optionsall')['school']
       this.treeOptions = getSessionStorage('Optionsall').team
  },

}
</script>

<style scoped lang='scss'>

</style>
